<template>
  <div style="padding: 10px">
    <vueButton
      :data="DiaryAccBtnData"
      @ButtonCallback="LoadDiaryAccWin"
    ></vueButton>
    <br />
    <!--     <vueGrid 
	    ref="dataGrid" 
	    :GridColumnData="DiaryAccColumnData" 
	    :GridData="DiaryAccGridData" 
	    @GridCurrentRowCallback="LoadDiaryAccGridCurRow"
	    @GridRowCallback="LoadDiaryAccGridRow"
	    @GridArraySpanCallback="LoadDiaryAccGridArraySpan">
	</vueGrid> -->

    <!--checkbox多选框-->
    <!--  <vue-checkbox 
            modelKey="statementsIsUsed"
        ></vue-checkbox> -->

    <!--   <div style="margin-top:20px;">
	    	vxeGrid
	    </div>
	    
    <vxeGrid
 		ref="vxeGrid" 
 		:url="DiaryAccGridObj.url"
 		:isCustom="DiaryAccGridObj.isCustom"
	    :GridColumnData="DiaryAccColumnData" 
	    :GridData="DiaryAccGridData" 
	    @GridEditActiveCallback="LoadEditActiveDiaryAccGrid"
	    @GridEditCloseCallback="LoadEditCloseDiaryAccGrid"
    ></vxeGrid> -->
    <!--调用弹框-->
    <vxeDialog
      ref="vxeDialog"
      title="新增日记账"
      :isShowWin.sync="DiaryAccGridObj.isWin"
    >
      <!-- <diaryAccountAE slot="dialogContent"></diaryAccountAE> -->
    </vxeDialog>
    <!--  <el-button
    size="small"
    @click="addTabCont()"
  >
    add tab
  </el-button> -->
    <vueTab
      ref="vueTab"
      :active.sync="DiaryAccGridObj.active"
      :closable="DiaryAccGridObj.editable"
      :isCustomData="true"
      :customData="DiaryAccGridObj.data"
    >
      <template slot="tabContent">
        <ul>
          <li>篮球</li>
          <li>足球</li>
        </ul>
      </template>
      <!-- <component :is="DiaryAccGridObj.active" /> -->
      <!--:is 的作用：标签转换成 active 变量绑定的这个组件  slot="tabPanel"-->
    </vueTab>

    <!--   <div id="aaa">
      <component :is="DiaryAccGridObj.active" />
    </div> -->
    <!-- <vueTree ref="vueTree" :data="treeData"></vueTree> -->
  </div>
</template>

<script>
// import accoutMsg from "@/page/accBookMana/components/accoutMsg.vue";
// import numRule from "@/page/accBookMana/components/numRule.vue";
// import accoutFormat from "@/page/accBookMana/components/accoutFormat.vue";
// import accoutRule from "@/page/accBookMana/components/accoutRule.vue";

import vueTab from "@/components/vueTab/tab.vue";
import vueButton from "../../components/vueButton/button";
import vueGrid from "../../components/vueGrid/grid.vue";
import vxeGrid from "../../components/vxeGrid/vxeGrid.vue";
import vueCheckbox from "../../components/vueForm/myCheckbox.vue";
import vxeDialog from "../../components/vxeDialog/vxeDialog.vue";
import vueTree from "../../components/vueTree/vueTree.vue";

let DiaryAccColumnListData = [
  {
    guid: "guids2",
    code: "eleName",
    field: "eleName",
    name: "要素名称",
    title: "要素名称",
    type: "input",
    isVisiable: true,
    isedit: 1,
    requirement: 0,
    ordernum: 10,
    colwidth: 300,
    defaultvalue: null,
    fixed: false,
    sortable: true,
  },
  {
    guid: "guids8",
    code: "eleType",
    field: "eleType",
    name: "要素类型",
    title: "要素类型",
    type: "select",
    isVisiable: true,
    isedit: 1,
    requirement: 0,
    ordernum: 10,
    colwidth: 100,
    defaultvalue: null,
    fixed: false,
    sortable: false,
  },

  {
    guid: "gudis9",
    code: "accountIsUsed",
    field: "accountIsUsed",
    name: "日记账启用",
    title: "日记账启用",
    type: "checkbox",
    isVisiable: true,
    isedit: 1,
    requirement: 0,
    ordernum: 50,
    colwidth: 180,
    defaultvalue: null,
    fixed: false,
    sortable: false,
  },
  {
    guid: "gudis10",
    code: "statementsIsUsed",
    field: "address",
    name: "对账单启用",
    title: "对账单启用",
    type: "select",
    isVisiable: true,
    isedit: 1,
    requirement: 0,
    ordernum: 60,
    colwidth: null,
    defaultvalue: null,
    fixed: false,
    sortable: false,
  },
];
let DiaryAccGridListData = [
  {
    phonenumber: "1",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区11",
    statementsIsUsed: 1,
    zip: 200333,
  },
  {
    phonenumber: "2",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区22",
    statementsIsUsed: 1,
    zip: 200333,
  },
  {
    phonenumber: "3",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区33",
    statementsIsUsed: 1,
    zip: 200333,
  },
  {
    phonenumber: "4",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区44",
    statementsIsUsed: 1,
    zip: 200333,
  },
  {
    phonenumber: "5",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区55",
    statementsIsUsed: 1,
    zip: 200333,
  },
  {
    phonenumber: "6",
    eleType: "王小虎",
    accountIsUsed: true,
    eleName: "普陀区55",
    statementsIsUsed: 1,
    zip: 200333,
  },
];
let DiaryAccBtnListData = [
  {
    guid: "guis1",
    key: "/uac/system/userset",
    code: "add",
    name: "新增",
    isVisiable: 1,
    ordernum: 1,
    classname: "el-icon-circle-plus-outline",
    action: "onAdd",
    disabled: false,
    title: "新增",
    appid: "budget",
    param: null,
    config: null,
    type: "success",
    icon: "",
    tips: "我是新增",
  },
  {
    guid: "guis2",
    key: "/uac/system/userset",
    code: "delete",
    name: "删除",
    isVisiable: 1,
    ordernum: 3,
    classname: "el-icon-circle-plus-outline",
    action: "onDelete",
    disabled: false,
    title: "删除",
    appid: "budget",
    param: "",
    config: "",
    type: "success",
    icon: "",
    tips: "我是删除",
  },
  {
    guid: "guis4",
    key: "/uac/system/userset",
    code: "active",
    name: "启用",
    isVisiable: 1,
    ordernum: 4,
    classname: "el-icon-circle-plus-outline",
    action: "onActive",
    disabled: false,
    title: "启用",
    appid: "budget",
    param: "",
    config: "",
    icon: "",
    type: "",
    tips: "我是启用",
  },
  {
    guid: "guis5",
    key: "/uac/system/userset",
    code: "disable",
    name: "停用",
    isVisiable: 1,
    ordernum: 4,
    classname: "el-icon-circle-plus-outline",
    action: "onDisable",
    disabled: false,
    title: "停用",
    appid: "budget",
    param: "",
    config: "",
    icon: "",
    type: "success",
    tips: "我是停用",
  },
];

let treeData = [
  {
    dataId: 1,
    label: "一级 1",
    disabled: true,
    children: [
      {
        dataId: 101,
        label: "二级 1-1",
        children: [
          {
            dataId: 10101,
            label: "三级 1-1-1",
          },
        ],
      },
    ],
  },
  {
    dataId: 2,
    label: "一级 2",
    children: [
      {
        dataId: 201,
        label: "二级 2-1",
        children: [
          {
            dataId: 20101,
            label: "三级 2-1-1",
          },
        ],
      },
      {
        dataId: 202,
        label: "二级 2-2",
        children: [
          {
            dataId: 20201,
            label: "三级 2-2-1",
          },
        ],
      },
    ],
  },
  {
    dataId: 3,
    label: "一级 3",
    children: [
      {
        dataId: 301,
        label: "二级 3-1",
        children: [
          {
            dataId: 30101,
            label: "三级 3-1-1",
          },
        ],
      },
      {
        dataId: 302,
        label: "二级 3-2",
        children: [
          {
            dataId: 30201,
            label: "三级 3-2-1",
          },
        ],
      },
    ],
  },
];
export default {
  name: "DiaryAccountGrid",
  data() {
    return {
      DiaryAccBtnData: DiaryAccBtnListData,
      DiaryAccColumnData: DiaryAccColumnListData,
      DiaryAccGridData: DiaryAccGridListData,
      DiaryAccGridObj: {
        isWin: false,
        url: "/afsp/index/addAccountBook",
        isCustom: true,
        editable: true,
        active: "accoutMsg",
        data: [
          {
            title: "账簿信息",
            name: "accoutMsg",
            comp: () => import("@/page/accBookMana/components/accoutMsg.vue"),
            disabled: false,
            isVisible: true,
            path: "/accoutMsg",
          },
          {
            title: "单号生成规则",
            name: "numRule",
            comp: () => import("@/page/accBookMana/components/numRule.vue"),
            disabled: false,
            isVisible: true,
            path: "/numRule",
          },
          {
            title: "账簿格式",
            name: "accoutFormat",
            comp: () =>
              import("@/page/accBookMana/components/accoutFormat.vue"),
            disabled: false,
            isVisible: true,
            path: "/accoutFormat",
          },
          {
            title: "对账规则",
            name: "accoutRule",
            comp: () => import("@/page/accBookMana/components/accoutRule.vue"),
            disabled: false,
            isVisible: true,
            path: "/accoutRule",
          },
        ],
        TabObj: {
          title: "对账规则",
          name: "accoutRule",
          comp: () => import("@/page/accBookMana/components/accoutRule.vue"),
          disabled: false,
          isVisible: true,
        },
      },
      treeData: treeData,
    };
  },
  //  beforeRouteEnter (to, from, next) {
  //   console.log("beforeRouteEnter",to, from, next)
  // },
  // // 路由改变前，组件就已经渲染完了
  // // 逻辑稍稍不同
  // beforeRouteUpdate (to, from, next) {
  //    console.log("beforeRouteUpdate",to, from, next)
  // },
  components: {
    vueButton,
    vueGrid,
    vxeGrid,
    vueCheckbox,
    vxeDialog,
    vueTab,
    vueTree,
  },
  // components: {
  // 	vueButton,
  //   vueGrid,
  //   vxeGrid,
  //   vueCheckbox,
  //   vxeDialog,
  //   vueTab,
  //   // accoutMsg,
  //   // numRule,
  // accoutFormat,
  //   // accoutRule
  // },
  watch: {
    // DiaryAccGridObj:{
    //   handler(newVal, objVal){
    //     this.active1 = newVal.active
    //     console.log(11, this.DiaryAccGridObj.active,newVal)
    //   } ,
    //   deep:true,
    //   immediate:false
    // }
  },
  created() {
    // let info : string="hi ts!"
    // this.DiaryAccGridObj.active = () => import('@/page/accBookMana/components/accoutFormat.vue');
  },
  mounted() {
    // this.$axios.get("/apis/resource/table/list/path?path=%2Fafsp%2Findex%2FaddAccountBook&which=1").then(res=>{
    //     this.DiaryAccColumnData=res.data.data.tableColumns;
    //  })
    // let param = {};
    //   this.$axios.get("/apis/cas/dict/get-element").then(res=>{
    //       this.DiaryAccGridData = res.data.data;
    //    })
  },
  methods: {
    loadPromise() {
      const runAsync2 = () => {
        var p = new Promise((resolve, reject) => {
          setTimeout(() => {
            reject("请求超时");
          }, 100);
        });
        return p;
      };
      let _this = this;
      const promiseClick = () => {
        console.log("点击方法被调用");
        let p = new Promise(function (resolve, reject) {
          _this.runAsync11().then((res) => {
            resolve(res.data.data);
          });
        });
        return p;
      };

      Promise.race([promiseClick(), runAsync2()])
        .then(function (data) {
          console.log("resolved成功回调");
          console.log("成功回调接受的值：", data);
        })
        .catch(function (reason, data) {
          console.log("catch到rejected失败回调");
          console.log("catch失败执行回调抛出失败原因：", reason);
        });

      const runAsync3 = () => {
        return "runAsync3";
      };
      // new Promise(function(resolve, reject){
      //     //做一些异步操作
      //     // setTimeout(function(){
      //     //     console.log('执行完成Promise');
      //     //     resolve('要返回的数据可以任何数据例如接口返回数据');
      //     //   }, 4000);

      //     _this.runAsync11().then(res=>{
      //       console.log("---====",res.data)
      //       if(res.data.resultCode==200){
      //         resolve(res.data.data);
      //       }else{
      //         reject(res.data.resultCode)
      //       }

      //     })

      //     // setTimeout(function(){
      //     // var num = Math.ceil(Math.random()*20); //生成1-10的随机数
      //     // console.log('随机数生成的值：',num)
      //     //   if(num<=10){
      //     //     resolve(num);
      //     //   }
      //     //   else{
      //     //     reject('数字太于10了即将执行失败回调');
      //     //   }
      //     // }, 2000);

      //   })

      // promiseClick()
      // .then(function(data){
      //     console.log(22,data);
      //     return runAsync2();
      // })
      // .then(function(data){
      //     console.log(333,data);
      //     return runAsync3();
      // })
      // .then(
      //   function(data){
      //       console.log('resolved成功回调');
      //       console.log('成功回调接受的值：',data);
      //     },
      //     // function(reason, data){
      //     //   console.log('rejected失败回调');
      //     //   console.log('失败执行回调抛出失败原因：',reason);
      //     // }
      //   )
      // .catch(function(reason, data){
      //     console.log('catch到rejected失败回调');
      //     console.log('catch失败执行回调抛出失败原因：',reason);
      //   });
    },
    runAsync11() {
      return this.$axios.get(
        "/apis/resource/table/page?pageId=CAS_PAGE_10201&which=1"
      );
      // return this.$axios.get("/apis/cas/dict/get-element")
    },
    LoadDiaryAccGridCurRow: function (CurRowVal) {
      // console.log(1,CurRowVal)
    },
    LoadDiaryAccGridRow: function (RowVal) {
      // console.log(2,RowVal)
    },
    LoadDiaryAccGridArraySpan: function ({
      row,
      column,
      rowIndex,
      columnIndex,
    }) {
      // if (rowIndex % 2 === 0) {
      //        if (columnIndex === 2) {
      //          return [1, 2];
      //        } else if (columnIndex === 3) {
      //          return [0, 0];
      //        }
      //      }

      if (columnIndex === 3) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    LoadDiaryAccWin: function (BtnData) {
      if (BtnData.action == "onAdd") {
        this.DiaryAccGridObj.isWin = true; //默认页面不显示为false,点击按钮将这个属性变成true
      } else if (BtnData.action == "onDelete") {
        // this.DiaryAccGridObj.active = () => import('@/page/accBookMana/components/accoutRule.vue');
        // this.DiaryAccGridObj.active = "accoutRule";
        // this.LoadAccountCardDeleteData();
      } else if (BtnData.action == "onActive") {
        // this.LoadAccountCardActiveData();
      } else if (BtnData.action == "onDisable") {
        // this.LoadAccountCardDisableData();
      }
    },
    LoadEditActiveDiaryAccGrid: function ({ row, column }, event) {
      // console.log(`打开 ${column.title} 列编辑`)
    },
    LoadEditCloseDiaryAccGrid: function ({ row, column }, event) {
      // console.log(`关闭 ${column.title} 列编辑`)
    },
    addTabCont() {
      let addTabObj = {
        title: "账簿格式",
        name: "accoutFormat",
        comp: () => import("@/page/accBookMana/components/accoutFormat.vue"),
        disabled: false,
        isVisible: true,
      };
      this.$refs.vueTab.addTab(addTabObj);
    },
  },
};
</script>

<style scoped>
</style>
